<template>
  <div>
    <!--添加新部门职位-->
    <div>
      <div :style="[{'float': 'left'},{'text-align': 'left'},{'margin-bottom':(isPositionAdd?('0px'):('20px'))}]">
        <h1>宠达分店 职位管理</h1>
      </div>
      <div style="margin-bottom: 20px; float: left; margin-left: 25%">
        <el-button round @click="isPosDialog = true" v-if="isPositionAdd">新增职位</el-button>
      </div>
    </div>

    <!--表格-->
    <div>
      <el-table
        :data="positionChainInfo"
        style="width: 100%; padding: 20px 50px 20px 50px" height="515px"
        v-loading="loading">
        <el-table-column
          prop="positionId"
          label="ID"
          width="250">
        </el-table-column>
        <el-table-column
          prop="positionName"
          label="部门 / 职位"
          width="250">
        </el-table-column>
        <el-table-column
          prop="positionCreateTime"
          label="创建日期"
          width="250">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" circle size="small" @click="editDialog(scope.row)" v-if="isPositionEdit"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="delPos(scope.row)" v-if="isPositionDel"></el-button>
            <el-button type="danger" round size="small" v-if="!isPositionEdit && !isPositionDel">无权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--添加新部门职位-->
    <el-dialog title="新增职位" :visible.sync="isPosDialog" top="15%" v-if="isPositionAdd">
      <div style="width: 500px; margin-left: 10%; margin-top: -25px; margin-bottom: -20px">
        <el-form label-width="80px" :model="positionChain">
          <el-form-item label="ID" v-if="positionId">
            <el-input v-model="positionChain.positionId" readonly></el-input>
          </el-form-item>
          <el-form-item label="职位">
            <el-input v-model="positionChain.positionName" ></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="positionChain.positionCreateTime" type="date" style="width: 420px"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmitPos('add')" v-if="addFlag">添加</el-button>
            <el-button type="primary" @click="onSubmitPos('edit')" v-if="editFlag">修改</el-button>
            <el-button @click="onSubmitCancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "PositionChainIndex",
      mounted() {
          this.getRcInfo();
      },
      data(){
          return{
            // 权限
            isPositionAdd: false,
            isPositionEdit: false,
            isPositionDel: false,

            positionChainInfo: [],

            // 单个部门/职位信息
            positionChain: {
              positionId: '',
              positionName: '',
              positionCreateTime: ''
            },

            // 弹框
            isPosDialog: false,
            // 弹框中的按钮
            positionId: false,
            addFlag: true,
            editFlag: false,
            // 加载
            loading: true

          }
      },
      methods: {
          // 获取店铺职位信息
        getRcInfo(){
          axios.post("/api/check",{passID: sessionStorage.getItem('passID')}).then((response)=>{
            if (response.data.statusCode == "200") {
              this.isPositionAdd = response.data.data.isPositionAdd; // 添加权限
              this.isPositionEdit = response.data.data.isPositionEdit; // 编辑权限
              this.isPositionDel = response.data.data.isPositionDel; // 删除权限
            }
          });
          this.axios.get('/api/rc').then((response)=>{
            if(response.data.statusCode == "200"){
              this.positionChainInfo = response.data.data;
              this.loading = false;
            }
          })
        },

        // 清除信息
        clearPositionHQ(){
          this.positionChain={
            positionId: '',
            positionName: '',
            positionCreateTime: ''
          }
        },

        onSubmitPos(attribute){
          let vPositionName = this.positionChain.positionName;
          let vPositionCreateTime = this.positionChain.positionCreateTime;
          var regExp = new RegExp(/^\s*$/);
          var rPositionName = vPositionName.match(regExp);
          if( this.positionChain.positionName == ''|| this.positionChain.positionCreateTime == ''
            || rPositionName || !this.beforeCurrentTime(vPositionCreateTime)){
            this.$message({
              message: '请将信息填写完整！',
              center: true,
              type: 'error'
            });
          }else {
            var date = new Date(vPositionCreateTime);
            var createTime = new Date(date.setDate(date.getDate()+1));
            if(attribute == 'add'){
              this.isPosDialog = false;
              this.axios({
                url: '/api/rc',
                method: "post",
                data: JSON.stringify({
                  positionName: vPositionName,
                  positionCreateTime: createTime
                }),
                headers: {
                  'Content-Type': 'application/json; charset=utf-8'
                }
              }).then((response)=>{
                if(response.data.statusCode == "200"){
                  this.$message({
                    message: '职位添加成功！',
                    center: true,
                    type: 'success'
                  });
                }else {
                  this.$message({
                    message: '职位添加失败！',
                    center: true,
                    type: 'error'
                  });
                }
                this.getRcInfo();
              })
            }else if(attribute == 'edit'){
              this.isPosDialog = false;
              this.axios({
                url: '/api/dep',
                method: "put",
                data: JSON.stringify({
                  positionId: this.positionChain.positionId,
                  positionName: vPositionName,
                  positionCreateTime: createTime
                }),
                headers:{
                  'Content-Type': 'application/json; charset=utf-8'
                }
              }).then((response)=>{
                if (response.data.statusCode == "200"){
                  this.$message({
                    message: '职位修改成功！',
                    center: true,
                    type: 'success'
                  });
                }else {
                  this.$message({
                    message: '职位修改失败！',
                    center: true,
                    type: 'error'
                  });
                }
                this.getRcInfo();
              })
            }
            this.clearPositionHQ();
          }
        },

        onSubmitCancel(){
          this.positionId = false;
          this.isPosDialog = false;
          this.addFlag = true;
          this.editFlag = false;
          this.clearPositionHQ();
        },

        // 时间验证
        beforeCurrentTime(value) {// 时间不能大于当前时间
          var myDate = new Date();
          var now = myDate.valueOf();
          var time = new Date(value).valueOf();
          if(now>time){
            return true;
          }else{
            return false;
          }
        },

        // 编辑弹框出现
        editDialog(v){
          this.positionChain={
            positionId: v.positionId,
            positionName: v.positionName,
            positionCreateTime: v.positionCreateTime
          };
          this.positionId = true;
          this.isPosDialog = true;
          this.addFlag = false;
          this.editFlag = true;
        },

        //删除
        delPos(v){
          this.$confirm('此操作将永久删除该职位, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.axios.delete('/api/dep',{params:{positionId:v.positionId}}).then((response)=>{
              if(response.data.statusCode == "200"){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }else {
                this.$message({
                  type: 'error',
                  message: '删除失败!请稍后重试。'
                });
              }
            })
            this.getRcInfo();
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除!'
            });
          });
        }
      }
    }
</script>

<style scoped>

</style>
